<template>
  <div v-html="compiledMarkdown" class="markdown-content"></div>
</template>

<script>
import { marked } from 'marked'

export default {
  name: 'MarkdownRenderer',
  props: {
    content: {
      type: String,
      required: true
    }
  },
  computed: {
    compiledMarkdown() {
      console.log('content', this.content)
      const renderer = new marked.Renderer()
      renderer.link = (href, title, text) => {
        const output = marked.Renderer.prototype.link.call(renderer, href, title, text)
        return output.replace('<a', '<a target="_blank" rel="noopener noreferrer"')
      }
      return marked(this.content, { renderer: renderer })
    }
  }
}
</script>

<style scoped>
.markdown-content {
  width: 100%;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  font-size: 20px;
  user-select: text;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
  border-bottom: 1px solid #eee;
  padding-bottom: 0.3em;
}

.markdown-content pre {
  background: #f5f5f5;
  padding: 1em;
  border-radius: 5px;
  width: 100%;
  white-space: pre-wrap;
}

.markdown-content pre code {
  background: #f5f5f5;
  padding: 1em;
  border-radius: 5px;
  width: 100%;
  white-space: pre-wrap;
}
</style>
<style>
/* 默认链接样式 */
.markdown-content a {
  color: #8894a7; /* 链接颜色稍微深一些 */
  text-decoration: none;
  cursor: pointer;
}

/* 鼠标悬停时的链接样式 */
.markdown-content a:hover {
  color: #667489; /* 悬停时变暗一些 */
  text-decoration: underline;
}

/* 链接激活时的样式 */
.markdown-content a:active {
  color: #556273; /* 激活时再变暗一些 */
}

/* 打字机效果文本样式 */
.markdown-content code,
.markdown-content tt {
  font-family: 'Courier New', Courier, monospace;
  white-space: nowrap; /* 禁止自动换行 */
}
.markdown-content {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  word-break: break-all;
}
.markdown-content h1 {
  font-size: 1.2em;
}
.markdown-content h2 {
  font-size: 1.1em;
}
.markdown-content h3 {
  font-size: 1.1em;
}
.markdown-content h4 {
  font-size: 1.1em;
}
.markdown-content h5 {
  font-size: 1.1em;
}
.markdown-content h6 {
  font-size: 1.1em;
}
</style>
